<template>
    <div class="card">
        <div class="title">
            <div class="title left">
                {{ formData.name }}
            </div>
            <div class="title right" @click="del(formData.uid)">
                删除
            </div>
        </div>
        <div class="bid">
            <div class="bid-item">
                <div class="bid-item-text">
                    当周预算(元)
                </div>
                <div>
                    <Field v-model="formData.budget" :formatter="formatter" :type="budgetType" placeholder="请填写" @focus="onFocus" @blur="onBlur" />
                </div>
            </div>
            <div class="bid-item">
                <div class="bid-item-text">
                    当周出价(元/户)
                </div>
                <div>
                    <Field v-model="formData.bidPrice" :formatter="formatter" :type="priceType" placeholder="请填写" @focus="onFocus" @blur="onBlur" />
                </div>
            </div>
        </div>
        <MyCell label="媒介类型" placeholder="请选择" :value="mediaType" @click="mediaTypeShow = true"></MyCell>
        <MyCell label="时长频次" placeholder="请选择" :value="timeType" @click="timeTypeShow = true"></MyCell>
        <div class="tips">
            预估最多竞得<span class="tips num">{{ formData.maxBidPoint }}</span>个点位，覆盖该城市约<span class="tips num">{{ formData.percent }}</span>点位
        </div>
    </div>
    <Picker title="媒介类型" :is-show="mediaTypeShow" :columns="mediaTypeColumns" @close="mediaTypeShow = false" @confirm="mediaTypeConfirm"></Picker>
    <FrequencySelecter :is-show="timeTypeShow" :duration-frequency="[+formData.duration, +formData.frequency]" @close="timeTypeShow = false" @confirm="timeTypeConfirm" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Field } from 'vant';
import type { FieldType } from 'vant';
import Picker from '@/components/DurationSelecter/index.vue';
import FrequencySelecter from '@/components/FrequencySelecter/index.vue';
import MyCell from '@/components/MyCell/index.vue';
import { calcMaxPoint } from '@/api/bid';
import _ from 'lodash';

const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
});

const emit = defineEmits(['del', 'change', 'focus', 'blur']);

const cityCode = props.data.id as string;

const formData = ref({
    uid: '',
    name: '',
    cityCode: cityCode,
    budget: '',
    bidPrice: '',
    mediaType: 1,
    duration: '15',
    frequency: '300',
    maxBidPoint: 0,
    percent: '0%',
});

formData.value = _.merge(formData.value, props.data);

const mediaType = ref('智能屏');
const timeType = ref('15s/300次');

const mediaTypeShow = ref(false);
const timeTypeShow = ref(false);

const mediaTypeColumns = [
    {
        text: '智能屏',
        value: 1,
    },
    {
        text: 'LCD',
        value: 2,
    },
];

const budgetType = ref<FieldType>('number');
const priceType = ref<FieldType>('number');

const calcMax = () => {
    if (formData.value.budget && formData.value.bidPrice) {
        const params = _.omit(formData.value, ['percent', 'maxBidPoint']);
        calcMaxPoint(params).then((res) => {
            formData.value.maxBidPoint = res.maxBidPoint;
            formData.value.percent = res.percent;
            emit('change', formData.value, formData.value.uid);
        }).catch((err) => {
            console.log(err);
        });
    }
};

const onBlur = () => {
    calcMax();
    emit('blur');
};

const onFocus = (e) => {
    emit('focus', e);
};

const mediaTypeConfirm = (value: { text: string, value: number }) => {
    if (value.value === 1) {
        timeType.value = '15s/300次';
        formData.value.duration = '15';
        formData.value.frequency = '300';
    } else {
        timeType.value = '15s/150次';
        formData.value.duration = '15';
        formData.value.frequency = '150';
    }
    mediaType.value = value.text;
    formData.value.mediaType = value.value;
    mediaTypeShow.value = false;
    emit('change', formData.value, formData.value.uid);
};

const timeTypeConfirm = (value: string[]) => {
    timeType.value = value[0] + '/' + value[1];
    // 提取字符串里的数字
    formData.value.duration = value[0].replace(/[^0-9]/ig, '');
    formData.value.frequency = value[1].replace(/[^0-9]/ig, '');
    timeTypeShow.value = false;
    emit('change', formData.value, formData.value.uid);
};

const formatter = (value: string) => {
    // 格式化不能输入负号,保留两位小数
    return value.replace(/[^\d.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
};

const del = (index: string) => {
    emit('del', index);
};
</script>

<style lang="scss" scoped>
.card {
    box-sizing: border-box;
    padding: 16px 12px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 12px;
}
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.left {
        font-size: 14px;
        font-weight: 600;
        color: #333333;
    }
    &.right {
        font-size: 13px;
        font-weight: 400;
        color: #397ff8;
    }
}
.bid {
    display: flex;
    align-items: center;
    position: relative;
    .bid-item {
        margin: 14px 0;
        .bid-item-text {
            font-size: 12px;
            font-weight: 400;
            color: #848484;
        }
    }
}
.bid::after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #ebedf0;
    transform: scaleY(0.5);
}
.van-cell {
    padding: 15px 0;
    align-items: center;
}
.icon {
    width: 12px;
    height: 12px;
}
:deep([class~="van-cell__title"]) {
    color: #5b5b5b;
}
:deep([class~="van-cell__value"]) {
    color: #333333;
}
:deep([class~="van-field__control"]) {
    color: #e60044;
}
:deep([class~="van-field"]) {
    padding: 0;
    font-family: "DIN Alternate Bold", sans-serif;
    font-size: 16px;
    color: #e60044;
    letter-spacing: 0;
}
.tips {
    margin-top: 12px;
    padding: 8px 12px;
    background-color: #fef7e8;
    color: #5b5b5b;
    font-size: 12px;
    font-weight: 400;
    &.num {
        color: #e60044;
        font-weight: 600;
        font-size: 12px;
        padding: 0;
    }
}
</style>
